import React, { useEffect, useRef, useState } from "react";
import "./login.less";
import { Form, Button, Input, Image, Toast } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { getAuthCode } from "@/services";
import type { GetAuthCodeResp, SysUserLoginReq } from "@/services";
import { encrypt } from "@/utils";
import { useUserStore } from "@/store";
import { history } from "umi";

const LoginForm = () => {
  const [visible, setVisible] = useState(false);
  const [authCode, setAuthCode] = useState<GetAuthCodeResp>();
  const autoCodeUuidRef = useRef("");
  const form = Form.useForm<SysUserLoginReq>()[0];
  const { userLoginIn } = useUserStore();

  const getAuthCodeRequest = async () => {
    const res = await getAuthCode();
    if (res.code == 200) {
      setAuthCode(res.data);
      autoCodeUuidRef.current = res.data.uuid;
    }
  };

  // 登录操作
  const loginHandle = async () => {
    const values = form.getFieldsValue();
    const sysUserLoginReq = {
      ...values,
      password: encrypt(values.password),
      uuid: autoCodeUuidRef.current,
      type: 1,
    };
    const isLogin = await userLoginIn(sysUserLoginReq);
    if (isLogin) {
      // message.success("登录成功!");
      Toast.show({
        icon: "success",
        content: "登录成功!",
        duration: 1000,
      });

      history.replace("/");
      window.location.reload();
    } else {
      // 刷新验证码
      getAuthCodeRequest();
    }
  };

  useEffect(() => {
    getAuthCodeRequest();
  }, []);

  return (
    <>
      <Form
        layout="horizontal"
        mode="card"
        form={form}
        onFinish={() => {
          loginHandle();
        }}
        footer={
          <Button block type="submit" color="primary" size="large">
            登陆
          </Button>
        }
      >
        <Form.Item
          name="username"
          label="账号"
          rules={[{ required: true, message: "账号不能为空" }]}
        >
          <Input onChange={console.log} placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "密码不能为空" }]}
          extra={
            <div className="p-2 cursor-pointer">
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
          <Input
            onChange={console.log}
            placeholder="请输入密码"
            clearable
            type={visible ? "text" : "password"}
          />
        </Form.Item>
        <Form.Item
          label="验证码"
          name="authCode"
          rules={[{ required: true, message: "验证码不能为空" }]}
          extra={
            <div className="">
              <Image
                width={90}
                height={30}
                src={authCode?.imgBase64}
                className="b-rounded-4px object-cover"
                onClick={getAuthCodeRequest}
              />
            </div>
          }
        >
          <Input placeholder="验证码" clearable />
        </Form.Item>
      </Form>
    </>
  );
};
const Login: React.FC = () => {
  return (
    <>
      <div className=" min-h-100vh">
        <div className="w-full h-60rpx"></div>
        <div className="center">
          <img
            className="w-100rpx center"
            src={require("@/assets/images/logo.png")}
          />
          <div className="mt-20rpx text-gray-5 text-16rpx">
            帝房法拍管理系统移动端
          </div>
        </div>
        <div className="center w-90% m-auto mt-20rpx">
          <LoginForm />
        </div>
      </div>
    </>
  );
};

export default Login;
